<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>组IP统计</title>
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <link rel="shortcut icon" href="/static/groupcheck.ico"/>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree layui-nav-side">
                <li class="layui-nav-item"><a href="/groupstat">组信息</a></li>
                <li class="layui-nav-item layui-this"><a href="javascript:;">组IP统计</a></li>
                <li class="layui-nav-item"><a href="/groupstat/domains">组域名统计</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-body" style="top:15px;">
        <div style="padding-left: 16px;padding-right: 16px;">
            <form class="layui-form layui-row layui-col-space16">
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <!-- <input type="text" name="group_no" value="" placeholder="组号" class="layui-input" lay-affix="clear">-->
                        <select lay-search="" name="group_no">
                            <option value="">请选择组号</option>
                            <?php if (!empty($group_nos)) {
                                foreach ($group_nos as $gno) {
                                    ?>
                                    <option value="<?php echo $gno; ?>"><?php echo $gno; ?></option>
                                <?php }
                            } ?>
                        </select>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-time"></i>
                        </div>
                        <input type="text" class="layui-input" id="ID-laydate" name="stat_date" placeholder="代表今日">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <button class="layui-btn" lay-submit lay-filter="table-search">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">清除</button>
                </div>
            </form>
            <table class="layui-hide" id="table-list" lay-filter="table-list"></table>
        </div>
    </div>
</div>
<script type="text/html" id="table-group">
    <ul>
        <li><strong>国家:</strong> {{= d.group.country_cn }}</li>
        <li><strong>组名:</strong> {{= d.group.group_name }}</li>
        <li><strong>脚本:</strong> {{= d.group.shell_link }}</li>
    </ul>
</script>
<script type="text/html" id="table-num1">
    <ul>
        <li><strong>今日:</strong> {{= d.today.num_ip1 }}</li>
        <li><strong>昨日:</strong> {{= d.num_ip1 }}</li>
    </ul>
</script>
<script type="text/html" id="table-num2">
    <ul>
        <li><strong>今日:</strong> {{= d.today.num_ip2 }}</li>
        <li><strong>昨日:</strong> {{= d.num_ip2 }}</li>
    </ul>
</script>
<script type="text/html" id="table-numpv">
    <ul>
        <li><strong>今日:</strong> {{= d.today.num_pv }}</li>
        <li><strong>昨日:</strong> {{= d.num_pv }}</li>
    </ul>
</script>
<script>
    layui.use(['table', 'dropdown'], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;

        // 渲染日期
        laydate.render({
            elem: '#ID-laydate'
        });

        // 搜索提交
        form.on('submit(table-search)', function (data) {
            console.log(data)
            var field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reload('table-list', {
                url: '/groupstat/getIpsData',
                method: 'post',
                page: {
                    curr: 1, // 重新从第 1 页开始
                    limit: 20,
                },
                where: field // 搜索的字段
            });
            return false; // 阻止默认 form 跳转
        });

        // 创建渲染实例
        table.render({
            title: '组IP统计信息',
            elem: '#table-list',
            url: '/groupstat/getIpsData',
            method: 'post',
            cellMinWidth: 80,
            totalRow: false, // 开启合计行
            page: true,
            limit: 20,
            lineStyle: 'height: 100px;', // 定义表格的多行样式
            cols: [[
                {field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true},
                {field: 'group_no', width: 120, title: '组号', sort: true},
                {field: 'group_name', title: '组信息', width: 400, templet: '#table-group'},
                {field: 'num_ip1', title: '不去重IP数', templet: '#table-num1', sort: true},
                {field: 'num_ip2', title: '去重IP数', templet: '#table-num2', sort: true},
                {field: 'num_pv', title: '访问量', templet: '#table-numpv', sort: true},
            ]],
            error: function (res, msg) {
                console.log(res, msg)
            }
        });
    });
</script>
</body>
</html>